<template name="basics">
  <view>
    <operate ref="operate">
      <div class="operate-btn">
        <navigator url="/pages/mine/help" navigate>
          <text class="btn cuIcon-formfill text-green"></text>
        </navigator>
        <text>帮助</text>
      </div>
    </operate>
    <div>
      <scroll-view scroll-y class="page">
        <image
          src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"
          mode="widthFix"
          class="response"
        ></image>
        <view class="nav-list">
          <div
            hover-class="none"
            @tap="skip(item)"
            class="nav-li"
            navigateTo
            :class="'bg-' + item.Color"
            :style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
            v-for="(item, index) in elements"
            :key="index"
          >
            <view class="nav-title">{{ item.Title }}</view>
            <view class="nav-name">{{ item.Name }}</view>
            <text :class="'cuIcon-' + item.Icon"></text>
          </div>
        </view>
        <view class="cu-tabbar-height"></view>
      </scroll-view>
    </div>
  </view>
</template>

<script>
import operate from '@/component/operate.vue'
import { r_GetList, hongquTest } from "@/utils/request.js"
export default {
  name: "basics",
  components: {
    operate
  },
  data () {
    return {
      tmp: [{
        title: '布局',
        name: 'layout',
        color: 'cyan',
        cuIcon: 'newsfill'
      },
      {
        title: '背景',
        name: 'background',
        color: 'blue',
        cuIcon: 'colorlens'
      },
      {
        title: '文本',
        name: 'text',
        color: 'purple',
        cuIcon: 'font'
      },
      {
        title: '图标 ',
        name: 'icon',
        color: 'mauve',
        cuIcon: 'cuIcon'
      },
      {
        title: '按钮',
        name: 'button',
        color: 'pink',
        cuIcon: 'btn'
      },
      {
        title: '标签',
        name: 'tag',
        color: 'brown',
        cuIcon: 'tagfill'
      },
      {
        title: '头像',
        name: 'avatar',
        color: 'red',
        cuIcon: 'myfill'
      },
      {
        title: '进度条',
        name: 'progress',
        color: 'orange',
        cuIcon: 'icloading'
      },
      {
        title: '边框阴影',
        name: 'shadow',
        color: 'olive',
        cuIcon: 'copy'
      },
      {
        title: '加载',
        name: 'loading',
        color: 'green',
        cuIcon: 'loading2'
      }
      ],
      elements: []
    };
  },
  methods: {
    getList: function () {
      this.elements = uni.getStorageSync('recordList')
      this.elements = this.elements != null ? this.elements : []
      if (this.elements.length == 0) {
        r_GetList().then(res => {
          console.log(res);
          this.elements = res.data.data
          if(this.elements == null) {
            return
          }
          for (let i = 0; i < this.elements.length; i++) {
            if (this.elements[i].Type == 1) {
              this.elements[i]["Url"] = "/pages/album/index?rid=" + this.elements[i].Rid.toString()
            } else if (this.elements[i].Type == 2) {
              this.elements[i]["Url"] = "/pages/sense/index?rid=" + this.elements[i].Rid.toString()
            } else if (this.elements[i].Type == 3) {
              this.elements[i]["Url"] = "/pages/trip/index?rid=" + this.elements[i].Rid.toString()
            } else if (this.elements[i].Type == 4) {
              this.elements[i]["Url"] = "/pages/journal/index?rid=" + this.elements[i].Rid.toString()
            }
          }
          uni.setStorageSync('recordList', this.elements)
        })
      }
    },
    skip: function (item) {
      uni.setStorageSync('rid', item.Rid)
      uni.navigateTo({
        url: item.Url
      });
    }
  },
  onLoad () {
    this.getList()

    let data = {
      "avatar": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJrjIgalLTspyvMqtM1J7zPKOaXqvwGpDhRNGp1WDCUjCc3dFe36DSibjtR9rKXdXqZkbpNTaRF9Aw/132",
      "code": "041Z0p0w3swPtY2jB13w3tLaOU0Z0p0d",
      "name": "红趣",
      "open_id": "oqUEO5kbxVA3cLn_T9Oowi1omnYA",
      "token": "1"
    }
    data = JSON.stringify(data)

    hongquTest(data).then(res => {
        console.log(res);
    })
  },
  onHide: function () {
    this.$refs.operate.closePopup()
  },

}
</script>

<style scoped>
#button_div {
  position: fixed;
  bottom: var(--window-bottom);
}
.page {
  height: 100vh;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 40upx 0px;
  justify-content: space-between;
}

.nav-li {
  padding: 30upx;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav-li::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-li.cur {
  color: #fff;
  background: rgb(94, 185, 94);
  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}

.nav-title {
  font-size: 32upx;
  font-weight: 300;
}

.nav-title::first-letter {
  font-size: 40upx;
  margin-right: 4upx;
}

.nav-name {
  font-size: 28upx;
  text-transform: Capitalize;
  margin-top: 20upx;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40upx;
  height: 6upx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100upx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40upx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36upx;
  margin-right: 1px;
}

.nav-li text {
  position: absolute;
  right: 30upx;
  top: 30upx;
  font-size: 52upx;
  width: 60upx;
  height: 60upx;
  text-align: center;
  line-height: 60upx;
}

.text-light {
  font-weight: 300;
}

@keyframes show {
  0% {
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(40upx);
  }

  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes show {
  0% {
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(40upx);
  }

  100% {
    transform: translateY(0px);
  }
}
</style>
